<template>
<view>
<!--pages/activity/take_input/take_input.wxml-->
<!--<import src="../../../utils/regions/regions.wxml"></import>-->
<view class="container">
  <view :style="'display:' + (showModal?'block':'none')" class="modal">
    <view class="notebox" style="background:url(../../../images/pop.png);background-size: 520rpx 471rpx;">
      <navigator url="/pages/user/order_list/order_list" style="display:none">
      <view class="detailbtn">
        订单详情
      </view>
      </navigator>
      <image @tap="closeFn" class="closebtn" src="/static/images/close_btn.png"></image>
    </view>
  </view>
  <view class="linebox">
    <view class="line">
      <view class="title">收货信息</view>
      <!-- <view bindtap="enterAddressPage" class="edit">编辑地址 <image src="../../../images/right.png"></image></view> -->
    </view>
    <form @submit="checkData">
        <view class="line">
          <view class="left">
            收货人：
          </view>
          <view class="right" style="line-height: 100rpx;height: 100rpx;">
            <input type="text" style="line-height: 100rpx;height: 100rpx;" name="name" placeholder="请输入收货人" class="right" @input="getChangePackge_name" :value="name"></input>
          </view>
        </view>
        <view class="line">
          <view class="left">
            联系方式：
          </view>
          <view class="right" style="line-height: 100rpx;height: 100rpx;">
            <input type="text" style="line-height: 100rpx;height: 100rpx;" name="mobile" placeholder="请输入手机号码" class="right" @input="getChangePackge_mobile" :value="mobile"></input>
          </view>
        </view>
        <view class="line">
          <view class="left">
            所在地址：
          </view>
          <view class="right" @tap="openRegionsModal" style="line-height: 100rpx;height: 100rpx;">
              
            <input type="text" v-if="address.province_name" style="line-height: 100rpx;height: 100rpx;" :value="address.province_name + ' ' + address.city_name + ' ' + address.district_name + ' ' + (address.twon_name != 'null'?address.twon_name:'')" name="address1" placeholder="点击选择地址" class="right" disabled></input>
            <input type="text" v-if="!address.province_name" style="line-height: 100rpx;height: 100rpx;" name="address1" placeholder="点击选择地址" class="right" disabled></input>
          </view>
        </view>
        <view class="line">
          <view class="left">
            详细地址：
          </view>
          <view class="right" style="line-height: 100rpx;height: 100rpx;">
            <input type="text" style="line-height: 100rpx;height: 100rpx;" name="address2" placeholder="请输入详细地址" class="right" @input="getChangePackge_address2" :value="address2"></input>
          </view>
        </view>
    </form>
  </view>

  <view class="btitle">
    <text class="choose">选择商品</text>
    <text class="note">
      {{select_num_tip}}
    </text>
  </view>

  <view class="itembox">
    <view v-for="(item, index) in goodsList" :key="index" class="item">
    <block v-if="item['disabled'] == 0">
      <view @tap="setAgree" class="choosebox" :data-index="index">
        <image v-if="item.selected" src="/static/images/ischeck.png"></image>
        <image v-if="!item.selected" src="/static/images/nocheck.png"></image>
      </view>
    </block>
     <block v-if="item['disabled'] == 1">
      <view class="choosebox" style="font-size:24rpx;width:65rpx">(已选)</view>
    </block>
      <image class="rightimg" :src="url + item.original_img"></image>
      <view class="rightbox">
        <em v-if="item.key_name">{{item.goods_name + item.key_name}}</em>
        <em v-if="!item.key_name">{{item.goods_name}}</em>
      </view>
    </view>
  </view>
  <view @tap="subFn" class="subbtn">立即提交</view>
</view>

<!-- 选择地址弹框  -->
<block data-type="template" data-is="regions" data-attr="regions">
    <!-- 选择地址弹框  -->
    <view :hidden="!regions.showRegionsModal">
        <view class="cover-layer" @tap="closeRegionsModal"></view>
        <view class="regions">
            <view v-for="(item, index) in regions.regions" :key="index" class="region" :data-id="item.id" :data-name="item.name" @tap="openRegionsModal">{{item.name}}</view>
        </view>
    </view>
</block>
</view>
</template>

<script>
// pages/activity/take_input/take_input.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
import Regions from "../../../utils/regions/Regions";

export default {
  data() {
    return {
      url: setting.url,
      enterAddressPage: false,
      firstEnter: true,
      //是否第一次进入页面
      showModal: false,
      goodsList: [],
      select_data: [],
      //选中的商品组合数据
      mixture_ticket_code: '',
      name: '',
      mobile: '',
      address: [],
      address1: '',
      address2: '',
      select_num_tip: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //拉取可提商品
    this.getChangePackge(options.mixture_ticket_code);
    this.initRegions();
    var take_address = uni.getStorageSync('take_address');
    var name = uni.getStorageSync('take_name');
    var mobile = uni.getStorageSync('take_mobile');
    var address2 = uni.getStorageSync('take_address2');
    this.setData({
      mixture_ticket_code: options.mixture_ticket_code,
      address: take_address ? take_address : [],
      name: name,
      mobile: mobile,
      address2: address2
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.enterAddressPage) {
      this.enterAddressPage = false;
      var addressId = uni.getStorageSync('take:take:address');
      console.log(addressId);
    } else if (this.firstEnter) {// this.getDefaultAddress();
    }

    console.log(addressId);

    if (addressId !== undefined) {
      this.setData({
        address: addressId
      });
    }

    this.firstEnter = false;
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  methods: {
    /** 初始化区域弹框相关 */
    initRegions: function () {
      var that = this;
      new Regions(this, 'regions', {
        endAreaLevelCall: function (parentId, regionName, address) {
          Object.assign(that.address, address);
          that.setData({
            address: that.address
          });
          that.setData({
            'address.province_name': that.address.province_name,
            'address.city_name': that.address.city_name,
            'address.district_name': that.address.district_name,
            'address.twon_name': that.address.twon_name,
            'address.province': that.address.province,
            'address.city': that.address.city,
            'address.district': that.address.district,
            'address.twon': that.address.twon
          });
          uni.setStorageSync('take_address', that.address);
        }
      });
    },
    getChangePackge_name: function (e) {
      this.setData({
        name: e.detail.value
      });
      uni.setStorageSync('take_name', e.detail.value);
    },
    getChangePackge_mobile: function (e) {
      this.setData({
        mobile: e.detail.value
      });
      uni.setStorageSync('take_mobile', e.detail.value);
    },
    getChangePackge_address2: function (e) {
      this.setData({
        address2: e.detail.value
      });
      uni.setStorageSync('take_address2', e.detail.value);
    },
    enterAddressPageFun: function () {
      this.enterAddressPage = true;
      uni.navigateTo({
        url: '/pages/user/address_list/address_list?operate=take'
      });
    },

    /** 检查是否已经选了地址 */
    checkAddressList: function () {
      var that = this;

      if (!this.address || this.address == null) {
        uni.showModal({
          title: '请先填写或选择收货地址~',
          success: function (res) {
            if (res.confirm) {
              that.enterAddressPageFun();
            } else {
              uni.navigateBack();
            }
          },
          fail: function () {
            uni.navigateBack();
          }
        });
        return false;
      }

      return true;
    },
    //选中商品
    setAgree: function (e) {
      var that = this;
      var tmp_select_data = [];
      var index = e.currentTarget.dataset.index;
      var goodsList = that.goodsList;

      for (var i in goodsList) {
        if (i == index) {
          if (goodsList[i].selected) {
            goodsList[i].selected = 0;
          } else {
            goodsList[i].selected = 1;
          }
        } //组合选中商品数据


        if (goodsList[i].selected) {
          tmp_select_data.push(i);
        }

        that.setData({
          select_data: tmp_select_data
        });
      } //更新商品展示


      that.setData({
        goodsList: goodsList
      });
    },
    closeFn: function (e) {
      this.setData({
        showModal: false
      });
    },
    subFn: function (e) {
      var that = this;

      if (!that.address) {
        uni.showModal({
          title: '兑换提示',
          content: '请选择下单地址',
          showCancel: false
        });
        return;
      }

      if (that.select_data.length <= 0) {
        uni.showModal({
          title: '兑换提示',
          content: '请选择需兑换商品',
          showCancel: false
        });
        return;
      } // console.log(JSON.stringify(that.data.select_data));
      // var tmp_url = "/api/PickTicket/changeToOrder?mixture_ticket_code=" + that.data.mixture_ticket_code + "&goods_tip_arr=" + JSON.stringify(that.data.select_data) + "&address_id=" + that.data.address.address_id;


      var tmp_url = "/api/PickTicket/changeToOrder?mixture_ticket_code=" + that.mixture_ticket_code + "&goods_tip_arr=" + JSON.stringify(that.select_data) + "&consignee=" + that.name + "&mobile=" + that.mobile + "&address=" + that.address2 + "&province=" + that.address.province + "&city=" + that.address.city + "&district=" + that.address.district + "&twon=" + that.address.twon;
      request.post(tmp_url, {
        isShowLoading: false,
        success: function (res) {
          uni.showModal({
            title: '兑换提示',
            content: '兑换成功',
            showCancel: false
          });
          that.getChangePackge(that.mixture_ticket_code);
        }
      });
    },
    //拉取可提商品
    getChangePackge: function (mixture_ticket_code) {
      var that = this;
      request.post('/api/PickTicket/ajaxChangePackge?mixture_ticket_code=' + mixture_ticket_code, {
        isShowLoading: false,
        success: function (res) {
          that.setData({
            goodsList: res.data.result.goods_list
          });
          that.setData({
            select_num_tip: "(" + res.data.result['goods_num'] + "选" + res.data.result['pick_total'] + ",还剩" + res.data.result['no_pick_total'] + "个可提)"
          });
        }
      });
    },

    /** 获取用户收货地址 */
    getDefaultAddress: function () {
      var that = this;
      request.get('/api/User/ajaxAddressList', {
        success: function (res) {
          if (res.data.result.length > 0) {
            var address = res.data.result[0] || null;
            that.setData({
              address: address
            });
          } else {
            that.checkAddressList();
          }
        }
      });
    }
  }
};
</script>
<style>
/* pages/activity/take_input/take_input.wxss */
.linebox{
  width: 710rpx;
  border-radius: 10rpx;
  margin: 20rpx auto;
  background: #fff;
}
.linebox .line{
  width: 710rpx;
  border-top: 1rpx solid #f5f5f5;
  line-height: 100rpx;
  height: 100rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.linebox .line:first-child{
  border: 0;
}
.linebox .line .title{
  height: 100%;
  width: 200rpx;
  color: #333;
  font-size: 36rpx;
  float: left;
}
.linebox .line .edit{
  display: block;
  width: 130rpx;
  height: 40rpx;
  color: #ff6a00;
  line-height: 40rpx;
  font-size: 24rpx;
  float: right;
  margin-top: 30rpx;
}
.linebox .line .edit image{
  width: 12rpx;
  height: 20rpx;
  margin-top: 2rpx;
}
.linebox .line .left{
  float: left;
  width: 150rpx;
  font-size: 24rpx;
  line-height: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #999999;
}
.linebox .line .right{
  float: left;
  width: 500rpx;
  font-size: 26rpx;
  line-height: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333333;
}
.btitle{
  width: 100%;
  padding: 0 20rpx;
  margin-top: 55rpx;
  margin-bottom: 10rpx;
  color: #333333;
  font-size: 0rpx;
  line-height: 0;
}
.note{
  display: inline-block;
  color: #999;
  font-size: 22rpx;
  margin-left: 20rpx;
}
.choose{
  font-size: 36rpx;
  display: inline-block;
}
.itembox{
  width: 100%;
  margin-top: 25rpx;
}
.itembox .item{
  width: 710rpx;
  height: 190rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
.itembox .item .rightimg{
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  float: left;
  margin-left: 20rpx;
}
.itembox .item .rightbox{
  min-width: 400rpx;
  height: 150rpx;
  float: left;
  margin-left: 30rpx;
  position: relative;
}
.itembox .item .rightbox em{
  width: 100%;
  line-height: 1.5em;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  left:0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 28rpx;
}
.choosebox {
  width: 40rpx;
  height: 40rpx;
  margin-top: 55rpx;
  display: block;
  float: left;
}
.choosebox image{
  width: 100%;
  height: 100%;
}
.subbtn{
  position: fixed;
  bottom: 20rpx;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  background: #ff6a00;
  border-radius: 10rpx;
  line-height: 90rpx;
  width: 710rpx;
  color: #ffffff;
  font-size: 36rpx;
}
.modal{
  height: 100vh;
  width: 100vw;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
}
.notebox{
  width: 520rpx;
  height: 471rpx;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%);
}
.notebox .detailbtn{
    width: 360rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #FFD33B;
    text-align: center;
    color: #ff6a00;
    font-size: 36rpx;
    display: block;
    margin: 0 auto;
    margin-top: 340rpx;
    border-radius: 45rpx;
}
.notebox .closebtn{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 575rpx;
    left: 50%;
    transform: translate(-50%);
}

/* 区域选择弹框 */
@import "../../../utils/regions/regions.css"; 
</style>